<template>
  <div class="warpper-box sendSalary">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise" @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
        <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" @btn-search-click="loadTable(true)"
          @btn-reset-click="reset" />
        <span style="padding: 5px 0 0 0;">
          <a-button type="primary" icon="plus" @click="$refs.addInfo.add(enterpriseId)">新增</a-button>
        </span>
      </div>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="orderId" :scroll="{ x: 2800 }">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="salaryImportDetail(record)">导入明细</a>
          <a-divider type="vertical" />
          <a @click="salaryDetail(record)">详情</a>
          <span v-show="record.settleStatus == 0 || record.settleStatus == 3 || record.settleStatus == 4 || record.settleStatus == 5">
            <a-divider type="vertical" />
            <a @click="makeCost(record)">补缴服务费</a>
          </span>
          <!-- <span v-show="record.settleStatus == 3 || record.settleStatus == 4 || record.settleStatus == 5">
            <a-divider type="vertical" />
            <a @click="returnCost(record)">退回服务费</a>
          </span> -->
          <span v-show="record.settleStatus == 0">
            <a-divider type="vertical" />
            <a-popconfirm title="是否确认提交订单？" ok-text="确认" cancel-text="取消"
              @confirm="submitOrder(record)">
              <a>提交订单</a>
            </a-popconfirm>
          </span>
          <span v-show="record.settleStatus == 1">
            <a-divider type="vertical" />
            <a-popconfirm title="是否确认撤回订单？" ok-text="确认" cancel-text="取消"
              @confirm="withdrawOrder(record)">
              <a>撤回订单</a>
            </a-popconfirm>
          </span>
          <span v-show="record.settleStatus == 0">
            <a-divider type="vertical" />
            <a-popconfirm title="是否确认删除订单？" ok-text="确认" cancel-text="取消"
              @confirm="delOrder(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="addInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>
import store from '@/store'
import AddInfo from "./sendSalary_add.vue"
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  PARAMS_SALARY,
  COLUMNS_SENDSALARY
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTablePage,
  getSalaryExport,
  getSubmitOrder,
  deleteOrder,
  cancelOrder
} from "@/api/human/salaryPaySendSalary"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'sendSalary',
  components: {
    AddInfo,
    EnterpriseSelect
  },
  data() {
    return {
      params: {
        fApi: {},
        rule: PARAMS_SALARY,
        option: OPTION_INLINE,
      },
      table: {
        columns: COLUMNS_SENDSALARY,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.params.fApi.formData();
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导出企业员工
    // salaryExport() {
    //   let params = this.params.fApi.formData();
    //   params.enterpriseId = this.enterpriseId;
    //   getSalaryExport(params).then(res => {
    //     const blob = new Blob([res]);
    //     const fileName = '企业员工列表.xlsx';
    //     const elink = document.createElement('a'); // 创建a标签
    //     elink.download = fileName;
    //     elink.style.display = 'none';
    //     elink.href = URL.createObjectURL(blob);
    //     document.body.appendChild(elink);
    //     elink.click(); // 点击下载
    //     URL.revokeObjectURL(elink.href); // 释放URL 对象
    //     document.body.removeChild(elink); // 释放标签
    //   })
    // },
    
    // 提交订单
    async submitOrder(row) {
      let params = {
        orderId: row.orderId
      }
      const { code } = await getSubmitOrder(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 撤回订单
    async withdrawOrder(row) {
      let params = {
        orderId: row.orderId
      }
      const { code } = await cancelOrder(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 删除订单
    async delOrder(row) {
      let params = {
        orderId: row.orderId
      }
      const { code } = await deleteOrder(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 发薪明细
    salaryDetail(row) {
      this.$router.push({ name: 'humanResourcesSendSalaryDetailCode', query: { enterpriseId:this.enterpriseId,orderId: row.orderId }});
    },
    // 发薪导入明细
    salaryImportDetail(row) {
      this.$router.push({ name: 'humanResourcesSendSalaryImportDetailCode', query: { enterpriseId:this.enterpriseId,orderId: row.orderId,settleStatus: row.settleStatus }});
    },
    // 退回服务费
    returnCost(row) {

    },
    // 补偿服务费
    makeCost(row) {
      row.enterpriseId = this.enterpriseId;
      row.inType = 'edit';
      this.$router.push({ name: 'humanResourcesSendSalaryPayCode', query: row });
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.loadTable(true);
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less"></style>